每次要用到絕對定位和相對定位時，我都會忘記他們分別代表的是什麼，又再google一次，這次決定好好把概念整理清楚，希望不要再混淆啦~

CSS Position屬性有哪些?

• position: static;
• position: relative;
• position: absolute;
• position: fixed;
• position: sticky;

1. position: static; 預設位置

每個HTML元素預設的屬性，元素會照著瀏覽器預設的配置自動排版在頁面。
例如:

2. position: relative; 相對位置

如果沒去設定top、botton、left、right等移動方向的話，和position:static;是一樣的，元素會照著瀏覽器預設 配置排列。
例如:

 <div class="container">
     <div class="box">ONE</div>
     <div class="box1">TWO</div>
     <div class="box2">THREE</div>
 </div>

.container{
width:200px;
height:400px;
background-color:pink;
}

.box {
	position:relative;
	width:100px;
	height:100px;
	background-color:violet;
	
 }
 
.box1 {
	width:100px;
	height:100px;
	background: skyblue;
	
 }

.box2{
	width:100px;
	height:100px;
	background-color: lemonchiffon;
	
}

如果有設定top、botton、left、right等移動方向的話，position: relative 會以自己的位置做為基準來移動，且原來的空間會被保留下來，所以其他排列的元素會維持在原來的位置上。
例如:

.box {
	position:relative;
	left:110px;
	width:100px;
	height:100px;
	background-color:violet;
	
 }

3. position: absolute 絕對定位

將某個區塊設定position: absolute 之後，這個區塊會脫離原本預設的版面配置，預設是以瀏覽器為基準來排列。
和position:relative不同，設定了absolute的區塊空間不會保留，所以若有其他的元素會自動補上。

例如:

.container{
width:200px;
height:400px;
background-color:pink;
}

.box {
	position:absolute;
	width:100px;
	height:100px;
	background-color:violet;
 }
 
.box1 {
	width:150px;
	height:150px;
	background: skyblue;
	text-align: right;
 }

.box2{
	width:100px;
	height:100px;
	background-color: lemonchiffon;
	
}

可以看到藍色的區塊遞補上去

.container{
width:200px;
height:400px;
background-color:pink;
margin:0 auto;
}

.box {
	position:absolute;
	left: 50px;
	width:100px;
	height:100px;
	background-color:violet;
 }
 
.box1 {
	width:100px;
	height:100px;
	background: skyblue;
 }

.box2{
	width:100px;
	height:100px;
	background-color: lemonchiffon;
	
}

可以看到紫色區塊脫離了粉紅色區塊的容器
因為沒有指定基準元素，所以會以瀏覽器為基準位置來移動

如果指定基準元素(有設定position:relative;的元素)，就會以基準元素作為起點來移動位置。

例如:
把黃色的區塊設定成基準位置
因為紫色區塊移動了，藍色的區塊就遞補上去

.container{
width:200px;
height:400px;
background-color:pink;
}

.box {
	position:absolute;
	left:50px;
	top:50px;
	width:100px;
	height:100px;
	background-color:violet;
 }
 
.box1 {
	width:100px;
	height:100px;
	background: skyblue;
 }

.box2{
	position: relative;
	width:100px;
	height:100px;
	background-color: lemonchiffon;
	
}

4. position:fixed

position: fixed 和沒有指定基準元素(position:relative)的position:absolute一樣，是以瀏覽器為基準元素來移動位置。 不同的是，position:fixed會讓有設定的區塊在拉動卷軸之後，顯示在固定位置上。

5. position:sticky

position:sticky; 是 relative 及 fixed 兩種 position 的綜合
預設情況下，元素的設定和 position: relative一樣，捲動頁面時元素會跟著父元素一起捲動，但是當元素與視窗的距離小於指定數值時，元素則會轉換為 position: fixed;，固定黏在( sticky )指定的數值上，距離不會再縮小。

例如:

 <div class="container">
    <p>container</p>
    <div class="box">ONE</div>
    <div class="box1">TWO</div>
    <div class="box2">THREE</div>
</div> 

.container{
width:200px;
height:200vh;
background-color:pink;
position:relative;
}

.box {
	position:sticky;
	top:0;
	width:100px;
	height:100px;
	background-color:violet;
 }
 
.box1 {
	width:100px;
	height:100px;
	background: skyblue;
 }

.box2{
	width:100px;
	height:100px;
	background-color: lemonchiffon;	
}

一開始的預設位置

當拉動卷軸時，紫色區塊碰到top:0;的位置時，就固定在同個位置

相關資料:stick positioning
參考資料: Learn CSS Position In 9 Minutes

除了使用position屬性之外，z-index屬性也很常和position屬性一起搭配使用來改變HTML元素之間的圖層位置

z-index

預設位置屬性(position:static;)搭配z-index使用會沒有效果

z-index:number; 根據設定的數字大小決定堆疊的順序，數字越大代表權重越高越上層。

例如:

.container{
 width:200px;
 height:200px;
 background-color:pink;
 position:relative;
}

.box {
	position:absolute;
	right:60px;
	bottom:30px;
	width:100px;
	height:100px;
	background-color:violet;
    z-index:5;	
  }
  
.box1 {
	position:absolute;
	right:-20px;
	bottom:-30px; 
	width:100px;
	height:100px;
	background: skyblue;
	z-index: 2;
	
  }

.box2{
	width:100px;
	height:100px;
	background-color: lemonchiffon;	
}

還沒設定z-index之前，藍色區塊會蓋掉部分的紫色區塊

在設定z-index之後，紫色區塊被提高一層，蓋掉了部分藍色區塊

參考資料:z-index

以上為個人學習筆記整理
若有錯誤，歡迎指正